<template>
  <div id="customer-login-info">
    <div class="card">
      <div class="card-body">
        <button @click.stop="search()">刷新</button>
      </div>
      <table class="table table-sm" v-if="loginInfo !== null">
        <thead>
          <tr>
            <th>登录用户名</th>
            <th>姓名</th>
            <th>部门</th>
            <th>职位</th>
            <th>Email</th>
            <th>手机</th>
            <th>状态</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="info of userInfos">
            <td>
              {{ info.username }}
              <a
                href="javascript:void(0)"
                @click.stop="updateUserUsername(info.username, info.id)"
                class="ms-2 btn btn-sm btn-info"
                v-if="isAdmin && info.temporaryUsername"
                >修改</a
              >
            </td>
            <td>{{ info.empname }}</td>
            <td>{{ info.departmentName }}</td>
            <td>{{ info.positionName }}</td>
            <td>
              {{ info.email }}
              <a
                href="javascript:void(0)"
                @click.stop="
                  updateUserEmail(info.username, info.email, info.id)
                "
                class="ms-2"
                v-if="isAdmin"
                >修改</a
              >
            </td>
            <td>
              {{ info.mobile }}
              <a
                href="javascript:void(0)"
                @click.stop="
                  updateUserMobile(info.username, info.mobile, info.id)
                "
                class="ms-2"
                v-if="isAdmin"
                >修改</a
              >
            </td>
            <td>
              {{ showLoginUsernameStatus(info.status) }}
              <template v-if="info.status === 1">
                <a
                  href="javascript:void(0)"
                  @click.stop="disableUser(info.id)"
                  class="ms-2 btn btn-sm btn-danger"
                  v-if="isAdmin"
                  >禁用</a
                >
              </template>
              <template v-else>
                <a
                  href="javascript:void(0)"
                  @click.stop="enableUser(info.id)"
                  class="ms-2 btn btn-sm btn-success"
                  v-if="isAdmin"
                  >启用</a
                >
              </template>
            </td>
            <td>
              <a
                href="javascript:void(0)"
                @click.stop="resetPassword(info.username, info.id)"
                class="ms-2 btn btn-sm btn-warning"
                v-if="isAdmin"
                >重置密码</a
              >
            </td>
          </tr>
          <tr v-if="loginInfo !== undefined">
            <td colspan="4">
              <strong>登录网址</strong>
              <h4>
                <a :href="loginInfo.eotmsUrl" target="_blank">{{
                  loginInfo.eotmsUrl
                }}</a>
              </h4>
            </td>
          </tr>
          <tr>
            <td colspan="4">
              <strong>企业客户:</strong>
              <span class="text-danger"
                >可以查看本公司的订单和账单，以及报表分析。</span
              >
              <br />
              <strong>企业散客:</strong>
              <span class="text-info">可以查看本公司的订单。</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <my-modal-prompt ref="modalPrompt">
      <span slot="title">{{ modalTitle }}</span>
    </my-modal-prompt>
  </div>
</template>

<script>
import {
  resetUserPassword,
  updateUserUsername,
  updateUserEmail,
  updateUserMobile,
  updateUserEtermUsername,
  disableUser,
  enableUser,
} from "@/api/admin.js";
import { searchCustomerLoginInfos } from "@/api/customer.js";

import MyModalPrompt from "@/components/modal/my-modal-prompt.vue";

export default {
  props: {
    customerId: {
      type: Number,
    },
    passengerId: {
      type: Number,
    },
    loginInfo: {
      type: Object,
    },
    count: {
      type: Number,
    },
  },
  components: {
    MyModalPrompt,
  },
  data() {
    return {
      modalTitle: "",

      userInfos: [],
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isDataAdmin;
    },
  },
  mounted: function () {
    console.log("customer-login-info: mounted");
    this.search();
  },
  activated: function () {
    console.log("customer-login-info: activated");
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (msg) {
      this.$store.dispatch("showLoading", { loadingText: msg });
    },
    hideLoading: function () {
      this.$store.dispatch("hideLoading");
    },
    search: function () {
      if (this.customerId < 1) {
        return;
      }
      const params = {
        "sc.pageNo": 1,
        "sc.pageSize": 100,
        "sc.passengerId": this.passengerId,
      };
      searchCustomerLoginInfos(this.customerId, params, (v) => {
        // console.log(v)
        this.userInfos = v.dataList;

        this.$emit("update:count", v.dataList.length);
      });
    },
    showLoginUsernameStatus: function (val) {
      if (val === 1) {
        return "启用";
      } else if (val === 0) {
        return "未启用";
      } else if (val === 4) {
        return "禁用";
      } else {
        return val;
      }
    },
    resetPassword: function (username, userId) {
      // const username = this.loginInfo.username
      // const userId = this.loginInfo.id

      this.modalTitle = "重置用户(" + username + ")密码, 请输入新密码";

      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          this.showLoading();

          const params = {
            id: userId,
            password: remark,
          };
          resetUserPassword(
            params,
            (v) => this.commonShowMessage(v),
            () => {
              this.hideLoading();
            }
          );
        })
        .catch((ex) => {});
    },
    updateUserUsername: function (username, userId) {
      this.modalTitle = "更改用户(" + username + ")的用户名, 请输入新用户名";

      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          this.showLoading();

          const params = {
            id: userId,
            username: remark,
          };
          updateUserUsername(
            params,
            (v) => this.commonShowMessage(v),
            () => {
              this.hideLoading();
            }
          );
        })
        .catch((ex) => {});
    },
    updateUserEmail: function (username, email, userId) {
      this.modalTitle = "更改用户(" + username + ")的email为:";

      this.$refs.modalPrompt
        .modal(email)
        .then((remark) => {
          this.showLoading();

          const params = {
            id: userId,
            email: remark,
          };
          updateUserEmail(
            params,
            (v) => this.commonShowMessage(v),
            () => {
              this.hideLoading();
            }
          );
        })
        .catch((ex) => {});
    },
    updateUserMobile: function (username, mobile, userId) {
      this.modalTitle = "更改用户(" + username + ")的手机号为:";

      this.$refs.modalPrompt
        .modal(mobile)
        .then((remark) => {
          this.showLoading();

          const params = {
            id: userId,
            mobile: remark,
          };
          updateUserMobile(
            params,
            (v) => this.commonShowMessage(v),
            () => {
              this.hideLoading();
            }
          );
        })
        .catch((ex) => {});
    },
    updateUserEtermUsername: function () {
      const etermUsername = this.loginInfo.etermUsername;
      const userId = this.loginInfo.id;

      this.modalTitle = "更改eterm用户名, 多个用逗号（单角）分隔:";

      this.$refs.modalPrompt
        .modal(etermUsername)
        .then((remark) => {
          this.showLoading();

          const params = {
            id: userId,
            etermUsername: remark,
          };
          updateUserEtermUsername(
            params,
            (v) => this.commonShowMessage(v),
            () => {
              this.hideLoading();
            }
          );
        })
        .catch((ex) => {});
    },
    disableUser: function (userId) {
      const params = {
        id: userId,
      };
      disableUser(
        params,
        (v) => this.commonShowMessage(v),
        () => {
          this.hideLoading();
        }
      );
    },
    enableUser: function (userId) {
      const params = {
        id: userId,
      };
      enableUser(
        params,
        (v) => this.commonShowMessage(v),
        () => {
          this.hideLoading();
        }
      );
    },
    commonShowMessage: function (v) {
      if (v.status === "OK") {
        this.showErrMsg("操作成功");
        this.search();
      } else {
        this.showErrMsg("操作失败: " + v.errmsg);
      }
    },
  },
};
</script>